import React, { useState } from "react";
import { Card, Button, Form, Input } from "antd";
import { useNavigate } from "react-router-dom";

import "./login.scss";

const Login = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  const rulesList = {
    phone: [
      { required: true, message: "请输入手机号" },
      {
        pattern: "/^1[3-9]d{9}$/",
        message: "手机号格式不正确",
      },
    ],
    password: [{ required: true, message: "请输入密码" }],
  };

  const onFinish = (values) => {
    console.log("Success:", values);
    //跳转到/

    navigate("/");
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className="login">
      <Card
        style={{
          width: 400,
          height: 300,
        }}
        className="login-card"
      >
        <h3>滴滴答</h3>
        <Form
          form={form}
          className="login-form"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          validateTrigger="onBlur"
        >
          <Form.Item name="phone" rules={rulesList.phone}>
            <Input className="input-custom-height" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="password" rules={rulesList.password}>
            <Input.Password
              className="input-custom-height"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item label={null}>
            <Button
              type="primary"
              htmlType="submit"
              className="input-custom-height"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;
